<template>
    <div class="box">
        <van-nav-bar title="vivo" />
    </div>
    <!-- 轮播 -->
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" style="width: 100%;height: 200px;" />
        </van-swipe-item>
    </van-swipe>
    <!-- 宫格 -->
    <van-grid :column-num="4" style="margin-left: 30px;">
        <!-- <van-grid-item v-for="item in dh" :icon="item.name" :text="item.image_src" /> -->
        <img src="../views/img/1.png" alt="" style="width: 100px;height: 100px;">
        <img src="../views/img/1.png" alt="" style="width: 100px;height: 100px;">
        <img src="../views/img/1.png" alt="" style="width: 100px;height: 100px;">
        <img src="../views/img/1.png" alt="" style="width: 100px;height: 100px;">
        <img src="../views/img/1.png" alt="" style="width: 100px;height: 100px;">
        <img src="../views/img/1.png" alt="" style="width: 100px;height: 100px;">
    </van-grid>

    <div class="box1">

        <span>距离本场结束还有

            <span class="djs">8</span>:
            <span class="djs">23</span>:
            <span class="djs">45</span>
        </span>
    </div>

    <div class="box2">

        <div class="a1">
            <img src="../views/img/2.png" alt="" style="width: 125px;height: 160px;">
            <img src="../views/img/2.png" alt="" style="width: 125px;height: 132px;">
            <img src="../views/img/2.png" alt="" style="width: 125px;height: 144px;">
            <img src="../views/img/2.png" alt="" style="width: 125px;height: 177px;">
            <img src="../views/img/2.png" alt="" style="width: 125px;height: 110px;">
        </div>
        <div class="a2">

            <img src="../views/img/2.png" alt="" style="width: 125px;height: 110px;">
            <img src="../views/img/2.png" alt="" style="width: 125px;height: 177px;">
            <img src="../views/img/2.png" alt="" style="width: 125px;height: 144px;">
            <img src="../views/img/2.png" alt="" style="width: 125px;height: 132px;">
            <img src="../views/img/2.png" alt="" style="width: 125px;height: 160px;">
        </div>

    </div>

</template>

<script setup>
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
];

import { catitemsApi } from '@/api/api';
import { ref } from 'vue';

let dh = ref([]);
catitemsApi().then(res => {
    console.log(res);
    dh.value = res.data.message

})
</script>

<style lang="scss" scoped>
img {
    margin-left: 10px;
}

.box1 {
    .djs {
        width: 20px;
        height: 20px;
        background-color: red;
    }
   
}

.box2 {
    width: 500px;
    height: 600px;
    // background-color: antiquewhite;
    display: flex;
    .a1 {
        width: 150px;
        height: 600px;
        // background-color: red; margin-left: 30px;
    }

    .a2 {
        width: 150px;
        height: 600px;
        // background-color: orange; margin-left: 30px;
    }
}
</style>